<template>
  <div>
    <Row justify="end">
      <Button class="btn_item" type="info" icon="md-add" @click="addDirectory">新建目录</Button>
      <Button class="btn_item"  type="success" icon="md-add" @click="addBlog">新建文档</Button>
    </Row>
    <divider></divider>

    <div style="text-align: left" v-for="(blogView,directoryId,sIndex) in blogListView">
      <Row style="background: #f3f3f9;padding: 0.5rem 1rem;" >
        <i-col flex="auto">
          <strong>{{blogView.directoryName}}
            <span v-show="Object.keys(directoryMap).length != 0&&directoryMap[directoryId].state===0" style="color:#ed4014; font-size: 12px;margin-left: 0.3rem">(未启用)</span></strong>
        </i-col>
        <i-col >
          <!--        <KeyValueView title="排序">{{ sIndex }}</KeyValueView>-->
          <a href="javascript:void(0)" style="margin-left: 0.7rem" @click="addBlog(directoryId)"  title="当前目录添加BLOG">
            <Icon type="md-add-circle" color="#666" size="17" />
          </a>
          <a href="javascript:void(0)"  style="margin-left: 0.7rem" @click="editDirectory(directoryId)" title="编辑目录" >
            <Icon type="ios-create" color="#666" size="17" />
          </a>
          <a href="javascript:void(0)"  style="margin-left: 0.7rem" @click="deleteDirectory(directoryId)" title="移除目录">
            <Icon color="#666" size="17" type="md-trash" />
          </a>
        </i-col>
      </Row>

      <div >
        <List size="small" style="margin:0.5rem">
          <ListItem v-for="(item,index) in blogView.blogList" class="item_hover">
            <i-col flex="auto">

              <KeyValueView title="标题" >{{item.title}}</KeyValueView>
<!--              <KeyValueView title="简介" v-show="item.subtitle.trim()!==''" >{{item.subtitle}}</KeyValueView>-->
              <KeyValueView title="链接" oneline >
                <a :href="$store.getters.webDomain + item.linkUrl" target="_blank"> {{$store.getters.webDomain + item.linkUrl}}</a>
               </KeyValueView>
             <div>
               <KeyValueView title="顺序">
                 <span style="font-size: 12px; color: #757575;padding: 0.25rem;border-radius: 3px;border: solid 1px #e0e0e0;"> #{{index}}</span>
               </KeyValueView>
               <KeyValueView title="最后编辑" >{{$tiyBJTime(item.updatetime)}}</KeyValueView>
             </div>

            </i-col>
            <i-col >
              <div class="item_bottom" style="padding: 0.5rem " >
                <template >
                  <Button type="info" size="small" ghost v-show="item.state===3||item.state===0" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="previewBlog(item)">待预览发布</Button>
                  <Button type="success" ghost size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="publishBlog(item)" v-show="item.state===1">待发布</Button>
                </template>
                <Button type="primary" ghost size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="editBlog(item.id)">编辑</Button>
                <Button type="error" ghost size="small" style="margin-left: 0.5rem;margin-bottom: 0.5rem" @click="deleteBlog(item.id)" >删除</Button>
              </div>

            </i-col>

          </ListItem>
        </List>
      </div>
    </div>

    <Modal
      v-model="modalView.isShow"
      :title="modalView.title"
      :mask-closable="false"
      :loading="modalView.isLoading" width="80%"  >

      <Form ref="paramBlogModel" :model="param.blog" :rules="rules" ::label-width=120>
        <div class="modal_base_div" >
          <Row style="">
            <i-col span="20">
              <FormItem label="标题:" prop="title" :label-width=120 >
                <Input v-model.trim="param.blog.title" style="width:100%"  placeholder="输入文章标题"  ></Input>
              </FormItem>
            </i-col>
          </Row>

          <Row style="">
            <i-col span="20">
              <FormItem label="简介:" prop="subtitle" :label-width=120>
                <Input v-model.trim="param.blog.subtitle" style="width:100%"   type="textarea"   placeholder="显示于列表页的文章简介"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row >
            <i-col span="12">
              <FormItem label="所属目录:" prop="directoryId" :label-width=120 >
                <Select v-model="param.blog.directoryId" style="margin-right: 1rem" >
                  <Option v-for="item in directoryList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="展示顺序 : " :label-width=120 >
                <InputNumber v-model.trim="param.blog.sequence" :min=0 class="form_step"></InputNumber>
              </FormItem>
            </i-col>


          </Row>
          <Row >
            <i-col span="20">
              <FormItem label="固定网址:" prop="linkName" :label-width=120>
                <Input v-model.trim="param.blog.linkName" class="input_item" placeholder="该属性请慎重修改!" style="width:100%"
                >
                </Input>
                <span v-text="displayShortLink" style="color: #9e9e9e"></span>
              </FormItem>
            </i-col>
          </Row>

          <Row v-show="modalView.isModify">
            <FormItem   :label-width=0>
              <quill-editor ref="blog_content" id="blog_content" class="ql-snow tiy_quill"  v-model="param.blog.content" :options="editorOptionApp"></quill-editor>
            </FormItem>
          </Row>
          <Row style="margin-top:3rem">
            <i-col span="20">
              <Button size="small" ghost type="info" @click="editPageMeta">编辑SEO元数据</Button>
            </i-col>
          </Row>
        </div>
      </Form>
      <div slot="footer">
        <Button @click="modalView.isShow=false">取消</Button>
        <Button type="primary" @click="save()">保存</Button>
      </div>
    </Modal>

    <Modal v-model="status.modalModifySEO.isShow" title="编辑SEO元数据" :width="700" :mask-closable="false">
      <page-meta-form ref="pageMetaModify" :page-meta-info-list="param.pageMetaInfos" :target="param.blog.id"
                      :page-meta-info-type="6"></page-meta-form>
      <div slot="footer">
        <Button @click="status.modalModifySEO.isShow=false">取消</Button>
        <Button type="primary" @click="saveBlogSEO()">确定</Button>
      </div>
    </Modal>
    <!-- 选择图片弹窗 -->
    <Modal v-model="imageSelectModal.isShow" title="单击选择图片" footer-hide
           :styles="{top: '20px',bottom:'20px',}" width="70%" height="1000">
      <a-image :hideleft="true" @cancelClicked="hideImageSelectModal()" @sureClicked="selectedImage"></a-image>
    </Modal>

    <Modal v-model="status.modalDirectory.isShow" :title="status.modalDirectory.title"
           :mask-closable="false"
           :loading="status.modalDirectory.isLoading" :styles="{top: '20px',width:'70%'}">
      <Form :model="param.directory" :label-width="110" ref="directory"  :rules="directoryRules">
        <div style="padding: 1rem 0px">
          <Row style="width: 100%;">
            <i-col span="14">
              <FormItem label="目录名称 :" prop="name">
                <Input v-model.trim="param.directory.name" style="width: 90%"
                       class="form_step"></Input>
              </FormItem>
            </i-col>

            <i-col span="10">
              <FormItem label="是否启用 :" inline >
                <i-switch v-model="param.directory.state" :true-value="1" :false-value="0"> </i-switch>
              </FormItem>
            </i-col>`
          </Row>
          <Row >
            <i-col span="20">
              <FormItem label="展示顺序 : " :label-width=120 >
                <InputNumber v-model.trim="param.directory.sequence" :min=0 class="form_step"></InputNumber>
              </FormItem>
            </i-col>
          </Row>
        </div>
      </Form>
      <div slot="footer">

        <Button @click="status.modalDirectory.isShow=false">取消</Button>
        <Button type="primary" @click="saveDirectory">保存</Button>
      </div>
    </Modal>



  </div>
</template>

<script>
import tiyData from "./js/blogList/list_data";
import {
  webList,
  init,
  save,
  saveBlogSEO,
  edit,
  initDirectory,
  saveDirectory,
  editDirectory,
  listDirectory,
  deleteBlog,
  deleteDirectory,
  beforePreviewBlog,
  beforePublishPage
} from "./js/blogList/list_funs"
import PageMetaForm from "../stands/PageMetaForm/PageMetaForm";

import Quill from 'quill';
import htmlEditButton from "quill-html-edit-button";
import KeyValueView from "../widgets/KeyValueView";
import AImage from "../image/ImageSelect";
import {isEmpty} from "../js/commonUtils";
Quill.register("modules/htmlEditButton", htmlEditButton);
import ImageResize from "quill-image-resize-module";
import {imageInit, webImageList} from "../image/js/select/image_funs";
import imageData from "../image/js/select/image_data";
Quill.register('modules/imageResize', ImageResize);

let AlignAttr = Quill.import('attributors/style/align');
let FontAttr = Quill.import('attributors/style/font');
let SizeAttr = Quill.import('attributors/style/size');
Quill.register(AlignAttr, true);
Quill.register(FontAttr, true);
Quill.register(SizeAttr, true);

export default {
  data(){
    return{
      blogList:tiyData.tData.blogList,
      data:tiyData.tData,
      param:tiyData.tParam,
      status:tiyData.tStatus,
      modalView:tiyData.tStatus.modalView,
      rules:tiyData.tStatus.rules,
      directoryRules:tiyData.tStatus.directoryRules,
      editorOptionApp: {
        placeholder: '请编辑页面内容',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: [
              // [{'font': []}],//字体
              [{'header': [1, 2, 3, 4, 5, false]}, {'size': ['small', false, 'large', 'huge']}],
              ['bold', 'italic', 'underline', 'strike'],//加粗，斜体，下划线，删除线
              ['blockquote', 'link'],//引用，代码块
              [{'list': 'ordered'}, {'list': 'bullet'}],//列表
              [{'color': []}, {'background': []}],// 字体颜色，字体背景颜色
              [{'align': []}],//对齐方式
              ['image', 'video'],//上传图片、上传视频,
              ['clean'],//清除字体样式
            ],
            handlers: {
              image: this.editorImageHandler,
              size: this.setFontSize
            },
          },
          htmlEditButton: {}
        }
      },
      imageSelectModal: {
        isShow: false,
      },
      yunPath: this.$store.getters.imgPrefix,
      directoryList:tiyData.tData.directoryList,
      directoryIndex:'1'
    }
  },
  components: {
    KeyValueView, PageMetaForm, AImage
  },
  computed:{
    displayShortLink() {
      let shortLinkName = this.param.blog.linkName.replaceAll(" ", "-").toLowerCase();
      return this.$store.getters.webDomain + (isEmpty(this.param.blog.linkName)?"":(this.param.blog.linkName+".html"));
    },
    blogListView(){
      let blogMap = {};
      if(this.blogList.length>0){
        this.blogList.forEach(item=>{
          if(item.id==null){
            blogMap[item.directoryId] = {directoryName:item.directoryName,blogList:[]};
          }else{
            if(!blogMap.hasOwnProperty(item.directoryId)){
              blogMap[item.directoryId] = {directoryName:item.directoryName,blogList:[]};
            }
            blogMap[item.directoryId]["blogList"].push(item);
          }
        })
      }
      return blogMap;
    },
    directoryMap(){
      let result = {};
      this.directoryList.forEach(item=>{
        result[item.id]=item;
      })
      return result;
    }
  },
  methods:{
    init:function(){
      webList(this,tiyData);
      listDirectory(this,tiyData);
    },
    list:function(){
      webList(this,tiyData)
    },
    addBlog:function(directoryId){
      init(this,tiyData);
      if(directoryId!=null&&directoryId!=''){
        tiyData.tParam.blog.directoryId=directoryId;
      }
      tiyData.tStatus.modalView.isShow=true;
      tiyData.tStatus.modalView.isModify=false;
    },
    save:function(){
      save(this,tiyData)
    },
    editPageMeta:function(){
      tiyData.tStatus.modalModifySEO.isShow=true;
    },
    saveBlogSEO:function(){
      saveBlogSEO(this,tiyData);
    },
    editBlog:function(id){
      edit(this,tiyData,id)
    },
    editorImageHandler(arg1) {
      this.selectImage();
    },
    selectImage() {
      this.imageSelectModal.isShow = true;
      imageInit(this, imageData, false, true, 7);
      imageData.tParams.folderType = 7;
      imageData.tParams.folderList.folderName = this.param.blog.id;
      webImageList(this, imageData);
    },
    hideImageSelectModal() {
      this.imageSelectModal.isShow=false
    },
    selectedImage(selectedImages) {
      this.imageSelectModal.isShow = false;
      if(selectedImages.length > 0) {
        let img = selectedImages[0].yunKey;
        this.insertImage(img);
      }
    },
    insertImage(yunKey) {
      let selection = this.$refs.blog_content.quill.getSelection();
      let url = this.yunPath + yunKey;
      this.$refs.blog_content.quill.insertEmbed(selection==null?0:selection.index, 'image', url);
    },
    setFontSize(value) {
      // console.log(value);
      let fontSize = false;
      switch (value) {
        case "small":
          fontSize = 10;
          break;
        case "large":
          fontSize = 18;
          break;
        case "huge":
          fontSize = 32;
          break;
        default:
          fontSize = false;
      }
      let selection = this.$refs.blog_content.quill.getSelection();
      this.$refs.blog_content.quill.formatText(selection.index, selection.length, "size", fontSize?fontSize+"px":fontSize);
    },
    addDirectory(){
      initDirectory(this,tiyData);
      tiyData.tStatus.modalDirectory.isShow=true;
    },
    saveDirectory(){
      saveDirectory(this,tiyData);
    },
    editDirectory(id){
      editDirectory(this,tiyData,id)
    },
    deleteDirectory(directoryId){

      deleteDirectory(this,tiyData,directoryId);
    },
    deleteBlog(blogId){

      deleteBlog(this,tiyData,blogId);

    },
    previewBlog(blog){
      beforePreviewBlog(this,tiyData,blog);
    },
    publishBlog(blog){
      beforePublishPage(this,tiyData,blog);

    }


  },
  mounted(){
    // init(this,tiyData);
    this.init();

  }
}
</script>

<style scoped lang="less">
@import  (once,optional) "../css/base.less";
@import "~quill/dist/quill.core.css";
@import "~quill/dist/quill.snow.css";
@import "~quill/dist/quill.bubble.css";
.btn_item{
  margin-left:1rem;
}
.item_hover{
  padding: 0.5rem 0.5rem;
}
.item_hover:hover{
  background: #f3f3f3;
}
.quill-editor {
  overflow-y: visible;
  white-space: normal!important;
  img{
    width: 100%;
  }

}
.quill-editor{
  height: 29rem;
}
.ql-snow{
  height: 28rem;
}
.tiy_quill{
  font-family:Poppins,Open Sans,Arial,sans-serif !important;
}


</style>
